import { createElement, useState } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Link from 'rax-link';
import TextInput from 'rax-textinput';

function Cache() {
    const [key, setKey] = useState('');
    const [value, setValue] = useState('');
    const [cacheKey, setCacheKey] = useState('');
    const [cacheValue,getCacheValue] = useState('');
    const [deleteKey, setDeleteKey] = useState('');
  
    const excuteBridge = () => {
      
      ZWJSBridge.onReady(() => { 
        console.log('初始化完成后，执行bridge方法');
      })
    }
  
    //添加缓存
    const addCache = () => {
        excuteBridge();
        console.log('******* enter method handleChange(),next action: setLocalStorage() *******');
        ZWJSBridge.setLocalStorage({
        key: key,
        value: value

        }).then((result) => {
        
        console.log('###### setLocalStorage() log.  key : ' + key + '  ,#####  value:  ' + value);
        console.log(result);
        alert("添加成功");
        }).catch((error) => {
        
        console.log('###### setLocalStorage() error.  key : ' + key + '  ,#####  value:  ' + value);
        console.log(error);
        alert("添加缓存失败");
        });

        console.log('********  exit method handleChange(). key:' + key + '##value:' + value + ' ,*******' );
    }


    // 点击获取缓存值
    const getCache = () =>{
      excuteBridge();
      console.log('******* enter method getCache(), next action: getLocalStorage() cacheKey:  '+ cacheKey + '   ,*******');
      ZWJSBridge.getLocalStorage({ 
        key:cacheKey
     }).then((result) => {

        console.log('###### getLocalStorage() log.  ##### key:' + key);  
        console.log('####  result:' + JSON.stringify(result));
        getCacheValue(result[key])
        console.log('###### getLocalStorage() log.  ##### cacheValue:' + result[key]);
        
     }).catch((error) => {
       
       console.log('###### getLocalStorage() error:  ' + error);
      }); 
       
       console.log('******** exit method getCache() *********');
    }
  

    // 删除缓存
    const handleDelete = () =>{
      excuteBridge();
      console.log('******* enter method handleDelete(),next action: removeLocalStorage() key:   ' +  deleteKey +'   ,*******');
      ZWJSBridge.removeLocalStorage({ 
        key:deleteKey
       }).then((result) => {
  
         console.log('###### removeLocalStorage() log.  key :  ' + deleteKey );
         console.log(result);
         alert("删除成功");
         }).catch((error) => { 
          console.log('###### removeLocalStorage() error.  key :  ' + deleteKey );
           console.log(error);
           alert("删除失败");
         });
  
      console.log('********  exit method handleDelete() *********' );
    }
  

    return (
      <View style={{margin: 20}}>
  
        <div>
         <h1 style={{textAlign:'center',color:'white'}}>4.  欢迎来到缓存功能页</h1>
  
         <div>
         <h2>4.1  存储数据缓存</h2>
         <h5 style={{textAlign:'justify',color:'blue'}}>请输入key值:</h5>
         <TextInput
          value={key}
          style={{
            width: 600,
            height: 200,
            borderWidth: 1,
            borderColor: '#dddddd',
            borderStyle: 'solid'
        }}
          onChangeText={value => setKey(value)}
        />
        <h5 style={{textAlign:'justify',color:'blue'}}>请输入value值:</h5>
        <TextInput
          value={value}
          style={{
            width: 600,
            height: 200,
            borderWidth: 1,
            borderColor: '#dddddd',
            borderStyle: 'solid'
        }}
          onChangeText={value => setValue(value)}
        />
        <div>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
        <button onClick={() => {addCache()}}
                style={{
                  width: 160,
                  height: 40,
                  backgroundColor: 'grey',
                  color: 'white',
                  fontSize: 8
              }}  
        >加入缓存</button>
        </div>
  
  
        <div>
          <h2>4.2  读取数据缓存</h2>
          <h5 style={{textAlign:'justify',color:'blue'}}>请输入要获取缓存值的key:</h5>
          <TextInput value={ cacheKey }
                     onChangeText={text => setCacheKey(text)}
                     style={{
                      width: 600,
                      height: 200,
                      borderWidth: 1,
                      borderColor: '#dddddd',
                      borderStyle: 'solid'
                  }}
          ></TextInput>
        <h5 style={{textAlign:'justify',color:'blue'}}>缓存值为：</h5> <Text>{ cacheValue }</Text>
        <div>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
          <button onClick={() => {getCache()}}
                  style={{
                    width: 160,
                    height: 40,
                    backgroundColor: 'grey',
                    color: 'white',
                    fontSize: 8
                }}  
          >获取缓存值</button>
        </div>
        
        <div>
          <h2>4.3  删除缓存</h2>
          <h5 style={{textAlign:'justify',color:'blue'}}>请输入要删除数据的key:</h5>
          <TextInput value={ deleteKey }
                     onChangeText={text => setDeleteKey(text)}
                     style={{
                      width: 600,
                      height: 200,
                      borderWidth: 1,
                      borderColor: '#dddddd',
                      borderStyle: 'solid'
                  }}
          ></TextInput>
          <div>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
          <button onClick={() => {handleDelete()}}
                  style={{
                    width: 160,
                    height: 40,
                    backgroundColor: 'grey',
                    color: 'white',
                    fontSize: 8
                }}  
          >删除缓存</button>
        </div>
        </div>
        
      </View>
    );
}

export default Cache;
